<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common_head :: commonHead('tree')"></head>
<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <div th:include="/header :: header"></div>
                <!--menu-right-->
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <!-- //header-ends -->
            <!--/outer-wp-->
            <div class="outter-wp">
                <!--sub-heard-part-->
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">Maps</li>
                    </ol>
                </div>
                <!--//sub-heard-part-->
                <!--/graph-visual-->
                <div class="graph-visual">
                    <h2 class="inner-tittle">饼状图</h2>
                    <div class="graph">
                        <div class="map_container">
                            <a class="btn blue four" type="button" id="draw">绘图</a>
                            <div class="vali-form">
                                <div class="col-md-4 form-group1">数据数</div>
                                <div class="col-md-4 form-group1">数据值</div>
                                <div class="col-md-4 form-group1">数据标题</div>
                            </div>
                            <div class="input_kc vali-form">
                                <input class="col-md-4 input_txt name" disabled="disabled" style="background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(187, 187, 187);" title="数据1" id="name1" name="" value="数据1" type="text">
                                <input class="col-md-4 input_txt data" value="" style="color: rgb(51, 51, 51);"  id="data1" name="" type="text">
                                <input class="col-md-4 input_txt title" value="" style="color: rgb(51, 51, 51);"  id="title1" name="" type="text">
                                <div class="clearfix"> </div>
                            </div>
                            <div class="form_add" style=" margin-top:10px;"><span id="txtNumF">增加数据：</span><input style="width:100px;" id="txtNum" type="text" value="1" /><a href="#" id="add_item">增加</a></div>

                            <div id="pie" style="width: 1000px;height:800px;"></div>
                        </div>
                    </div>
                </div>
                <!--/graph-visual-->

            </div>
            <!--//outer-wp-->
            <!--footer section start-->
            <footer th:include="/footer :: footer">
                <!--<p>Copyright &copy; 2018.Panda company</p>-->
            </footer>
            <!--footer section end-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <div class="sidebar-menu" th:include="/sidebar :: sidebar"></div>
    <div class="clearfix"></div>
</div>

<script>
    myChart = echarts.init(document.getElementById("pie"));
    option = {
        title : {
            text: '饼状图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            selected:''
        },
        series : [
            {
                name: '',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data: [],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    $("#draw").click(function () {
        var data_str='[';
        $('.input_kc').each(function () {
            var data = $(this).find('.data').val();
            var title = $(this).find('.title').val();
            if (data && title){
                data_str += '{"value":"' + data + '","name":"' + title + '"},';
            }
        })
        data_str += ']';
        var data=eval(data_str);
        option.series[0].data=data;
        myChart.setOption(option);
    });

    $('#add_item').click(function (e) {
        var index = $('.input_kc').size() + 1;
        var disabled = $($('.name')[0]).attr('disabled');
        var style = $($('.name')[0]).attr('style');
        var txtnum = $('#txtNum').val();
        for(var i = 0; i < txtnum; i++){
            var item = $('<div class="input_kc vali-form"><input class="col-md-4 input_txt name" disabled="disabled" style="background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(187, 187, 187);" type="text" value="数据' + index + '" name="" id="name' + index + '"> <input type="text" name="" id="data' + index + '" class="col-md-4 input_txt data"> <input type="text" name="" id="title' + index + '" class="col-md-4 input_txt title"> <div class="clearfix"></div></div>');
            $('.form_add').before(item);
            item.find('.name').attr({
                'disabled': disabled,
                "style": style ? style : ""
            });
            index++;
        }
        $('#txtNum').val('1');
        $('.name,.data,.title').blur(function () {
            validate($(this).val(), $(this));
        });
        e.preventDefault()
    });
</script>
</body>
</html>